<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>系统环境及属性</title>
        <script src="./lib/axios.js"></script>
        <script src="./lib/vue.js"></script>
        <link rel="stylesheet" href="./lib/elementindex.css">
        <script src="./lib/elementindex.js"></script>

    </head>
    <body>

        <div id='systemDetail' style="display: none;">
            <el-card style="font-size:small;margin-bottom: 1.125rem;">
                <el-link href="./home.html" style="color: blue;">&lt;&lt;&lt;返回配参查看编辑页面</el-link>
            </el-card>
            <el-row>
                <el-col :span="16">
                    &nbsp;
                </el-col>
                <el-col :span="4">
                    &nbsp;
                </el-col>
                <el-col :span="4">
                    
                </el-col>
            </el-row>
            <el-tabs value='systemEnvironment'>
                <el-tab-pane id='profiles-pane' label="Profiles" name="profiles">
                    <el-table stripe border :data="profiles">
                        <el-table-column label="名称" prop="name" width="180px" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="数值" prop="value" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane id='environment-pane' label="System Environment" name="systemEnvironment">
                    <el-table stripe border :data="systemEnvironment">
                        <el-table-column label="名称" prop="name" width="180px" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="数值" prop="value" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane id='properties-pane' label="System Properties" name="systemProperties">
                    <el-table stripe border :data="systemProperties">
                        <el-table-column label="名称" prop="name" width="180px" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="数值" prop="value" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

        </div>

        <script type="module" id="system-detail-script">
            window.hosturl = document && document.location.href.startsWith('http://127.0.0.1:8848') ? 'http://localhost/resources' : '.';
            
            window.vmSystem = new Vue({
             el: '#systemDetail',
             data: {
                 detail:{},
                 showSystemDetail:false,
                 profiles:[],
                 systemEnvironment:[],
                 systemProperties:[],
             },
             mounted:function()
             {
                 this.$el.style.display= 'block';
             },
             methods: {
             },//end of method
         });
         
         loadData();
         
         function loadData()
         {
             let self = window.vmSystem;
                 axios.get(window.hosturl +`/system`).then(resp=>{
                     if(!resp.data.error)
                     {
                         let ret = resp.data.data.systemEnvironment;
                         for(let p in ret)
                         {
                             self.systemEnvironment.push({name:p,value:ret[p]});
                         }
                         
                         ret = resp.data.data.systemProperties;
                         for(let p in ret)
                         {
                             self.systemProperties.push({name:p,value:ret[p]});
                         }
                         
                         ret = resp.data.data;
                         self.profiles.push({name:"activeProfiles",value:ret.activeProfiles });
                         self.profiles.push({name:"defaultProfiles",value:ret.defaultProfiles });
                         
                     }else self.$message({showClose:true,type:"error",message:resp.data.data});
                         
                 }).catch(ex=>{
                     self.$message({showClose:true,type:"error",message:ex});
                 });
             }
      </script>


        <script type="module" id="ttt-script">
        </script>

        <div id='bottom'></div>
    </body>
</html>
